<template>
  <div class="card" style="height: 98%">
  <div class="home-container">
    <!-- 页面标题 -->
    <h2>首页</h2>

    <!-- 欢迎信息 -->
    <el-card class="welcome-card" shadow="hover">
      <div class="welcome-content">
        <h3>欢迎回来，{{ userRole }}:  {{ data.user.username }}！</h3>
        <p>今天是 {{ currentDate }}</p>
        <p>您可以查看部门人员分布、文章发布趋势及更多数据。</p>
      </div>
    </el-card>

    <!-- 快捷入口 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12" style=" display: flex; justify-content: center;"><el-button type="primary" plain @click="goToCharts" size="large">查看图表</el-button></el-col>
      <el-col :span="12" style=" display: flex; justify-content: center;"><el-button type="success" plain @click="refreshData" size="large">刷新数据</el-button></el-col>

    </el-row>

  </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user'))
});

console.log(data.user)

const router = useRouter();

// 示例用户角色（可以从 store 或接口获取）
const userRole = data.user.role === "EMP" ? '员工' : '管理员';

// 获取当前日期
const currentDate = ref('');

onMounted(() => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  currentDate.value = `${year}年${month}月${day}日`;
});

// 示例跳转方法
const goToCharts = () => {
  router.push('/manager/data'); // 跳转到图表页
};

// 刷新数据
const refreshData = () => {
  location.reload(); // 简单刷新页面
};
</script>

<style scoped>
.home-container {
  padding: 20px;
  height: 80%;
}

.welcome-card {
  background-color: #f9f9f9;
  border-left: 5px solid #409EFF;
  padding: 20px;
}

.welcome-content {
  height: 100%0;
}

.welcome-content h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.welcome-content p {
  margin: 8px 0 0;
  color: #666;
}
</style>

